import Vue from 'vue'
import Vuex from 'vuex'
import { setToken, getToken, removeToken } from '@/utils/storage.js'
import { reqGetChannels, reqGetAllChannels } from '@/api/channels.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 这里的初始值，不能为空，需要从本地的localStorage中取
    tokenInfo: getToken(),
    channels: [], // 我的频道
    allChannels: [] // 全部频道
  },
  mutations: {
    // 设置tokenInfo这个对象，对象中有token信息
    setTokenInfo (state, tokenObj) {
      state.tokenInfo = tokenObj
      // 一更新token，就往本地存一份，本地可以实现同步到vuex数据
      // localStorage.setItem('token', JSON.stringify(tokenObj))
      setToken(tokenObj)
    },
    // 移出tokenInfo的信息,恢复成空对象
    removeToken (state) {
      state.tokenInfo = {}
      // 更新到本地，本地清除token信息
      removeToken()
    },
    // 将频道存入vuex
    setChannels (state, channels) {
      state.channels = channels
    },
    // 获取全部频道
    setAllChannels (state, allChannels) {
      // console.log(allChannels)
      state.allChannels = allChannels
    },
    // 添加频道
    addChannel (state, channel) {
      state.channels.push(channel)
    },
    // 删除频道
    delChannel (state, channel) {
      state.channels = state.channels.filter(item => item.id !== channel.id)
    }
  },
  actions: {
    async getChannelsAsync (context) {
      const res = await reqGetChannels()
      context.commit('setChannels', res.data.data.channels)
    },
    async getAllChannelsAsync (context) {
      const res = await reqGetAllChannels()
      // console.log(res.data)
      context.commit('setAllChannels', res.data.data.channels)
    }
  },
  getters: {
    // 可选频道
    optionalChannels: (state) => {
      // 公式： 所有频道 - 我的频道 = 可选频道
      // 思路：
      // 1.过滤所有的频道
      // 2.过滤器的条件，如果遍历的频道，在我的频道中 不存在，说明是可选的，留下来，其他的过滤掉
      const results = state.allChannels.filter(item => {
        const index = state.channels.findIndex(channel => channel.id === item.id)
        return index === -1
      })
      return results
    }
  }
})
